<template>
  <div class="right-toolbar" :class="{ 'has-active-tool': isContentOpen }">
    <!-- 工具栏按钮列表 -->
    <div class="toolbar-buttons">
      <button 
        v-for="tool in tools" 
        :key="tool.id"
        class="tool-button"
        :class="{ active: activeTool === tool.id }"
        @click="selectTool(tool.id)"
        :title="tool.name"
      >
        {{ tool.icon }}
      </button>
    </div>

    <!-- 工具内容区域 -->
    <div class="tool-content" v-if="activeTool" :class="{ 'is-open': isContentOpen }">
      <div class="tool-header">
        <h3>{{ activeToolName }}</h3>
      </div>
      
      <!-- 工具内容 -->
      <div class="tool-body">
        <WatchlistDrawer v-if="activeTool === 'watchlist'"
          :currentSymbol="currentSymbol"
          @symbol-selected="handleSymbolSelected"
        />
        <div v-else-if="activeTool === 'indicators'" class="indicators-panel">
          <!-- 指标面板内容 -->
          <div class="search-box">
            <input type="text" placeholder="Search indicators..." />
          </div>
          <div class="indicators-list">
            <div class="indicator-group">
              <h4>Trend</h4>
              <div class="indicator-item">Moving Average</div>
              <div class="indicator-item">MACD</div>
            </div>
            <div class="indicator-group">
              <h4>Oscillators</h4>
              <div class="indicator-item">RSI</div>
              <div class="indicator-item">Stochastic</div>
            </div>
          </div>
        </div>
        <div v-else-if="activeTool === 'drawings'" class="drawings-panel">
          <!-- 绘图工具面板内容 -->
          <div class="drawing-tools-list">
            <div class="tool-group">
              <div class="tool-item">Line</div>
              <div class="tool-item">Rectangle</div>
              <div class="tool-item">Circle</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import WatchlistDrawer from './WatchlistDrawer.vue'

export default {
  name: 'RightToolBar',
  components: {
    WatchlistDrawer
  },
  props: {
    currentSymbol: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      activeTool: '',
      isContentOpen: false,
      tools: [
        { id: 'watchlist', name: 'Watchlist', icon: '📊' },
        { id: 'indicators', name: 'Indicators', icon: '📈' },
        { id: 'drawings', name: 'Drawing Tools', icon: '✏️' },
        { id: 'alerts', name: 'Alerts', icon: '🔔' },
        { id: 'calendar', name: 'Economic Calendar', icon: '📅' }
      ]
    }
  },
  computed: {
    activeToolName() {
      const tool = this.tools.find(t => t.id === this.activeTool)
      return tool ? tool.name : ''
    }
  },
  methods: {
    selectTool(toolId) {
      if (this.activeTool === toolId) {
        this.isContentOpen = !this.isContentOpen
      } else {
        this.activeTool = toolId
        this.isContentOpen = true
      }
      this.$emit('drawer-toggle', this.isContentOpen)
    },
    toggleContent() {
      this.isContentOpen = !this.isContentOpen
      this.$emit('drawer-toggle', this.isContentOpen)
    },
    handleSymbolSelected(symbol) {
      console.log('[RightToolBar] handleSymbolSelected called with:', symbol)
      this.$emit('symbol-selected', symbol)
    }
  }
}
</script>

<style scoped>
.right-toolbar {
  display: flex;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 100;
  transition: width 0.3s ease;
  width: 52px;
}

.right-toolbar.has-active-tool {
  width: 252px;
}

.toolbar-buttons {
  position: absolute;
  right: 0;
  top: 0;
  width: 52px;
  z-index: 3;
}

.tool-button {
  width: 52px;
  height: 53px;
  border: none;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #787b86;
  transition: all 0.2s;
}

.tool-button:hover {
  color: #131722;
  background: #f0f3fa;
}

.tool-button.active {
  color: #2196f3;
  background: #f0f3fa;
}

.tool-content {
  position: absolute;
  top: 0px;
  width: 200px;
  border-left: 1px solid #e0e3eb;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  box-shadow: -2px 0 5px rgba(0,0,0,0.1);
  height: 100%;
  transform: translateX(200px);
  transition: transform 0.3s ease;
}

.tool-content.is-open {
  transform: translateX(0);
}

.tool-header {
  padding: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #e0e3eb;
  background: #f8f9fd;
}

.tool-header h3 {
  margin: 0;
  font-size: 16px;
  color: #131722;
}

.toggle-button {
  background: none;
  border: none;
  color: #787b86;
  cursor: pointer;
  padding: 5px;
}

.toggle-button:hover {
  color: #131722;
}

.tool-body {
  flex: 1;
  overflow-y: auto;
}

.search-box {
  padding: 10px;
  border-bottom: 1px solid #e0e3eb;
}

.search-box input {
  width: 90%;
  padding: 8px;
  border: 1px solid #e0e3eb;
  border-radius: 4px;
}

.indicator-group, .tool-group {
  padding: 10px;
  border-bottom: 1px solid #e0e3eb;
}

.indicator-group h4 {
  margin: 0 0 10px 0;
  color: #787b86;
  font-size: 12px;
}

.indicator-item, .tool-item {
  padding: 8px;
  cursor: pointer;
  color: #131722;
}

.indicator-item:hover, .tool-item:hover {
  background: #f0f3fa;
}
</style>
